<template>
	<view class="wrap">
		<view class="content">
			<scroll-view class="nav" scroll-x>
				<view class="nav_box">
					<block v-for="(item, index) in navList" :key="index">
						<view class="nav_item" @tap="navClick(index)" :id="'nav' + index" :class="[currentNav == index ? 'nav_active' : '']">{{ item.title }}</view>
					</block>
				</view>
			</scroll-view>
			<view class="swiper_content">
				<view class="people" v-for="(item,index) in swiperList" :key="index">
					<view class="people-art">
						<view class="left">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="right">
							<view class="name">{{item.nicheng}}</view>
							<view class="time">申请时间: {{item.time}}</view>
						</view>
						<view class="state1" v-if="item.group_state == 0">
							<view class="cuo_css"><i class="iconfont iconguanbi" @tap="changeState(item.groupid,item.group_detail_id,2,index)"></i></view>
							<view class="dui_css"><i class="iconfont iconduigou" @tap="changeState(item.groupid,item.group_detail_id,1,index)"></i></view>
						</view>
						<view class="state2" v-else-if="item.group_state == 1">已同意</view>
						<view class="state3" v-else-if="item.group_state == 2">未同意</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import cDate from '../../common/util.js'
export default {
	data() {
		return {
			groupid: '',
			currentNav: 0,
			navList: [
				{
					title: '全部'
				},
				{
					title: '未审核'
				},
				{
					title: '已通过'
				},
				{
					title: '未通过'
				}
			],
			swiperList: []
		};
	},
	onLoad(e) {
		this.groupid = e.groupid;
		this.applyList();
	},
	methods: {
		navClick(index) {
			this.currentNav = index;
			this.applyList();
		},
		applyList() {
			var data = {
				groupid: this.groupid
			}
			if(this.currentNav != 0){
				var state = Number(this.currentNav - 1);
				data.group_state = state;
			}
			this.$zapi.apiPost('user/Grade.User/GradeApplyLists',data).then(res => {
				this.swiperList = res.data.data;
				for(var i=0; i<this.swiperList.length;i++) {
					this.swiperList[i].time = cDate.getYearTime(this.swiperList[i].update_time);
					if(this.swiperList[i].avatar == ''){
						this.swiperList[i].avatar =  this.defimg
					}
					if(this.swiperList[i].nicheng == ''){
						this.swiperList[i].nicheng = "未设置昵称"
					}
				}
			})
		},
		changeState(groupid,group_detail_id,state,index) {
			var data = {
				groupid: groupid,
				group_detail_id: group_detail_id,
				group_state: state
			}
			this.$zapi.apiPost('user/Grade.User/GradeApply',data).then(res => {
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
				this.swiperList[index].group_state=state;
			})
		}
	}
};
</script>

<style scoped>
page{
	background: #FAFAFA;
}
.wrap{
	position: absolute;
	height: 100%;
	width: 100%;
	background: #f3f3f3;
}
.content {
	position: absolute;
	width: 100%;
	background: #f3f3f3;
}

.nav {
	width: 100%;
	height: 90upx;
	background: #ffffff;
}

.nav_box {
	display: flex;
	justify-content: space-around;
}

.nav_item {
	display: flex;
	align-items: center;
	padding: 0 30upx;
	align-items: center;
	justify-content: center;
	height: 86upx;
}

.nav_active {
	color: #ff9900;
	border-bottom: 2px solid #ff9900;
}

.swiper_content {
	border: 1px soldi blue;
	padding: 0 30upx;
}
.people{
	width: 630upx;
	height: 100upx;
	padding: 30upx;
	margin: 20upx 0 0;
	background: #FFFFFF;
	box-shadow:0px 2upx 12upx rgba(0,0,0,0.05);
	border-radius:30upx;
}
.people-art{
	display: inline-flex;
	height: 100upx;
}
.left{
	width: 100upx;
}
.left image{
	width: 80upx;
	height: 80upx;
	border-radius: 50%;
	margin-top: 10upx;
}
.right{
	width: 380upx;
}
.name{
	color: #333333;
	font-size: 36upx;
}
.time{
	color: #999999;
	font-size: 28upx;
}
.state1{
	width: 150upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cuo_css,
.dui_css{
	width: 60upx;
	height: 60upx;
	background: #FF9900;
	border-radius: 50%;
}
.dui_css{
	background: #ff9900;
}
.iconguanbi{
	color: #FFFFFF;
	font-size: 30upx;
	margin-top: 6upx;
	margin-left: 16upx;
}
.iconduigou{
	font-size: 40upx;
	color: #FFFFFF;
	margin-left: 10upx;
}
.state2,
.state3{
	width: 150upx;
	text-align: center;
	color: #ff9900;
	font-size: 34upx;
	line-height: 100upx;
}
.state3{
	color: #FF9900;
}
</style>
